iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 16
1
Modern Web

前端UI軍火庫系列 第 16

[Day 16]placehold.it - 規劃中網站用來暫時放圖片的線上服務

  • 分享至 

  • xImage
  •  

placehold.it跟過去介紹的library都不太一樣,它是一個線上服務,功用是在網站規劃中還只是雛型階段時,暫時用來表示這裡有一張圖片的工具。也就是說,網站還未完成時,我們可能就需要進行一些DEMO,這時候某些預計要放圖片地方還沒有任何圖片可用;或是我們知道網站的某個地方一定會放置圖片,但沒有立即可用的圖片時,需要張占用的圖片放著,好確認版面不會亂掉等等,placehold.it就可以幫助你達到這些目標。

以下是使用placehold.it所產生的一些圖片範例

http://ithelp.ithome.com.tw/upload/images/20161216/20020617Bf6rUCNhtb.png

開始使用placehold.it

要使用placehold.it很簡單,只要在它的網址後面加上你想要產生的圖片大小即可,例如需要一張300x300的圖片時,HTML如下

<img src="http://placehold.it/300x300" title="我只是暫時放在這裡的">

就可以輕鬆放置一張300x300的圖片啦!

進階參數

placehold.it還有一些參數可以設定,都只需要調整網址就可以了

指定檔案格式

如果需要指定檔案格式,只需要直接在網址後面加上附檔名即可,支援的格式有gifjpegjpgpng

<img src="http://placehold.it/300x300.gif" title="我只是gif檔">

自訂圖片文字

預設的圖片文字內容是圖片大小,我們也可以直接指定圖片要顯示的文字,只要網址最後加上?text=xxxx即可。

<img src="http://placehold.it/300x300/?text=I+am+placehold" title="自訂文字也OK">

自訂顏色

我們也可以在網址後面加上兩個顏色代碼,第一個是文字顏色,第二個是背景顏色,來自訂圖片顏色,來搭配網站風格

<img src="http://placehold.it/300x300/ffffff/000000" title="我是白底黑字的圖片">

DEMO: https://jsfiddle.net/wellwind/8cvvthbk/

類似資源

  • temp.im:跟placehold.it使用方式基本上完全一樣,只是網址不同而已。
  • lorempixum:除了圖片大小外,也以選擇不同分類的圖片、彩色\灰階;同時還有一個產生器可以直接使用。
  • Dummy Image:一樣有個產生器可以使用,網站下方有很多樣板可以參考。
  • placekitten:所有圖片都是可愛的貓,愛貓一族可以考慮用這個,在雛型階段就有好心情XDD。
  • Unsplash It:除了有大量的圖庫可以使用,也內建不少濾鏡可以直接套用。

文章同步發表於: https://dotblogs.com.tw/wellwind/2016/12/16/front-end-placehold-it

不正經閒聊

換張圖片,換個心情吧XD


上一篇
[Day 15]Intro.js - 把建好的UI直接變成說明文件
下一篇
[Day 17]Dropzone.js - 上傳檔案的好幫手
系列文
前端UI軍火庫31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言